<template>
    <el-card>
        <div class="flex items-center">
            <div class="name bold mg-r-5">{{ detail?.dealInfo?.companyName || '--' }}</div>
            <el-icon v-if="detail?.dealInfo?.isBlackList" size="12" class="mg-r-5">
                <IconCusStop />
            </el-icon>
            <el-tag v-if="detail?.dealInfo?.serviceState === 0">已开通</el-tag>
            <el-tag v-if="detail?.dealInfo?.serviceState === 2" type="info">已关闭</el-tag>
        </div>
        <div class="flex flex-box mg-t-16">
            <div class="flex-item flex-1">
                <div class="fs-12 fc-lightgrey">商务负责人</div>
                <div class="fs-14 mg-t-10">{{ detail?.dealInfo?.salesName || '--' }}/{{ detail?.dealInfo?.deptName || '--'
                }}
                </div>
            </div>
            <div class="flex-item flex-1">
                <div class="fs-12 fc-lightgrey">客户联系人</div>
                <div class="flex">
                    <template v-if="detail?.relevantContacts?.length">
                        <template v-for="(i, index) in detail?.relevantContacts" :key="index">
                            <div class="fs-14 mg-t-10 fc-primary pointer" @click="showUpdate">{{ i.customName }}
                                <span v-if="index !== detail?.relevantContacts?.length - 1">、</span>
                            </div>
                        </template>
                    </template>
                    <template v-else>
                        <span class="mg-t-10">--</span>
                    </template>
                </div>
            </div>
            <div class="flex-item flex-1">
                <div class="fs-12 fc-lightgrey">关联客户</div>
                <div class="fs-14 mg-t-10">{{ (detail?.relevantContacts?.length && detail?.relevantContacts[0].companyName)
                    ||
                    '--' }}
                </div>
            </div>
            <div class="flex-item flex-1">
                <div class="fs-12 fc-lightgrey">产品开通时间</div>
                <div class="fs-14 mg-t-10">{{ detail?.time?.productOpenTime || '--' }}</div>
            </div>
            <div class="flex-item flex-1">
                <div class="fs-12 fc-lightgrey">修改负责人时间</div>
                <div class="fs-14 mg-t-10">{{ detail?.time?.updateSalerTime || '--' }}</div>
            </div>
            <div class="flex-item flex-1">
                <div class="fs-12 fc-lightgrey">备注</div>
                <div class="fs-14 mg-t-10 text-break">{{ detail?.time?.remark || '--' }}</div>
            </div>
        </div>
    </el-card>
    <contactList v-model:show="show" :company-id="companyId" :deal-id="id" />
</template>
<script setup>
import { ref, watch } from 'vue'
import { getDealInfo } from '@/api/clients/signClient.ts'

// import updateContact from './dialog/updateContact.vue';
import contactList from './dialog/contactList.vue'

const props = defineProps({
    id: {
        type: [Number, String]
    },
    companyId: {
        type: [Number, String]
    }
})

const emits = defineEmits(['companyId'])

const show = ref(false)

const detail = ref({})

const showUpdate = () => {
    show.value = true
}

const getDetail = () => {
    console.log(234, props.id, props.id !== 'null')
    if (props.id !== 'null') {
        getDealInfo({
            dealId: props.id
        }).then(res => {
            detail.value = res
        })
    }
    // } else {
    //     console.log('noeneoene');
    // }
}

watch(() => props.id, (newval) => {
    if (newval) {
        getDetail()
    }
}, {
    immediate: true,
    deep: true
})
</script>
<style lang="scss" scoped>
.flex-box {
    padding: 16px;
    background: #FAFAFC;
    border-radius: 5px;
}
</style>